<template>
  <!--  设置新密码 页面-->
  <div class="shezhixinmima">
    <div class="she-fanhui" @click="goback">《</div>
    <div class="she-zi-1">设置新密码</div>
    <div class="she-zi-2">请输入6~20位字母与数字组合的密码</div>
    <div class="she-zhong">
      <van-form @submit="onSubmit">
        <van-field
            v-model="password"
            type="password"
            placeholder="请输入新密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
            v-model="password1"
            type="password"
            placeholder="请再次输入"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-form>
    </div>
    <div class="she-xia">
      <div class="she-xia-zi" @click.prevent="updatePassword">确定</div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "SetPassword",
  data() {
    return {
      password: '',
      password1: '',
      account: this.$route.query.account,
      loginVo: {
        account: '',
        code: '',
        password: ''
      }
    }
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    updatePassword(){
      if (this.password == this.password1) {
        this.loginVo.password = this.password;
        this.loginVo.account = this.account;
        axios.post('http://localhost:11219/express/express/user/userPasswordUpdate', this.loginVo).then(res => {
          if (res.data.code == 200) {
            this.$toast.success('修改成功');
            this.$router.push({
              path: '/login/PasswordLogin'
            });
          } else {
            this.$toast.fail(res.data.message);
          }
        })
      }
    },
  },
}
</script>
<style scoped>
.shezhixinmima {
  width: 100%;
  height: 100%;
  top: 0%;
  /* 固定定位 */
  position: fixed;
  margin-top: 0;
  margin-bottom: 0;
  /* border: 1px solid red; */
}
.she-fanhui {
  float: left;
  margin-top: 20px;
  margin-left: 20px;
  font-size: 20px;
}
.she-zi-1 {
  position: fixed;
  margin-top: 100px;
  margin-left: 40px;
  font-size: 35px;
}
.she-zi-2 {
  width: 320px;
  float: left;
  margin-top: 155px;
  font-size: 15px;
  /* 字体左对齐 */
  text-align: left;
  color: dimgrey;
  /* border: 1px solid red; */
}
.she-zhong {
  width: 320px;
  height: 100px;
  float: left;
  margin-top: 100px;
  margin-left: 20px;
  /* border-bottom: 1px solid #4A9CD6; */
}
.she-xia {
  width: 320px;
  height: 45px;
  float: left;
  margin-top: 50px;
  margin-left: 20px;
  /*设置边框圆角 */
  border-radius: 30px;
  background-color: #4A9CD6;
}

.she-xia-zi {
  float: left;
  margin-top: 10px;
  margin-left: 145px;
  color: white;
}
</style>